<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<script type="text/javascript">
	/* 生成JQGrid表格 */
	var options = {
		//Ajax请求地址
		url : 'superbosswy/tjgn/list',
		//编辑请求头
		editurl:'superbosswy/edit',
		//表头名称
		caption:'班级列表',
		//设置jqgrid的全局样式为bootstrap样式
		/* styleUI: 'Bootstrap', */
		//斑马线，斑马线css样式需自己定义 如下
		altRows:true,
		altclass:'aaa',
		//宽度自适应，根据父容器适应宽度
		autowidth:true,
		//表宽1000 表高自动
		/* width:1000, */
		height:'auto',
		//接受的数据的数据类型
		datatype:'json',
		//请求方式
		mtype:'post',
		//每页显示行数
		rowNum:10,
		//可调整每页显示行数
		rowList:[3,5,10,15,25,50],
		//定义serch筛选搜索参数名，不定义默认的发送的是_searh 在spring里无法接收
		prmNames : { search : 'search' },
		//指定排序字段名称
		sortname:'id',
		//是否显示总的记录条数
		viewrecords:true,
		//开启导航栏，指定导航栏容器
		pager:'#dhl',
		//如何解析从Server端发回来的json数据
		jsonReader:{
			repeatitems:false,
			id:'id'
		},
		/* name取json里面对应的值 
		lable列的名称 
		index是根据什么字段排序 
		sorttype排序数据类型，如果根据该值排序，发送他的数据类型
		editable表示编辑时该值可修改 */
		colModel:[
			{name:'id',label:'序号',index:'id',align:'center',sorttype:'int',editable:false},
			{name:'danwei',label:'租户名称',index:'danwei',align:'center',sorttype:'String',editable:true,search:false},
			{name:'name',label:'联系人',index:'name',align:'center',sorttype:'String',editable:false,search:false},
			{name:'dzfpNum',label:'所管理的电子发票数量',index:'dzfpNum',align:'Integer',sortttype:'String',editable:true},
		]}
	$(function(){
			$('#list').jqGrid(options);
			/* 生成JQGrid导航栏 */
			$('#list').jqGrid('navGrid','#dhl',
		{
			edit:true,
			edittext : "编辑",
			add:false,
			addtext : "新增",
			del:false,
			deltext : "删除",
			view:true,
			viewtext : "查看",
			refresh:true,
			refreshtext : "刷新",
			search:true,
			searchtext : "搜索"
		},{
			//样式顺序规定：改==>增==>删==>查==>视图（不可改变）	
			//top和left表示弹框弹出来的初始定位宽高
			top:220 ,left:600 ,
			//closeOnEscape表示按esc关闭弹框
			closeOnEscape: true
		},{
			top:220 ,left:600 ,
			closeOnEscape: true
		},{
			top:220 ,left:600 ,
			closeOnEscape: true
		},{
			top:220 ,left:600 ,
			closeOnEscape: true,
			multipleSearch: true
		},{
			top:220 ,left:600 ,
			closeOnEscape: true
		});
	});
	//执行一个laydate实例
	laydate.render({
	  elem: '#a',
	  type: 'date'//指定元素
	});
</script>
<style type="text/css">
.aaa {
	background: #eee;
}
</style>
<div align="center">
	<div style="margin: 0px auto;">
		<table id="list"></table>
	</div>
</div>
<div id="dhl"></div>